<template>
    <div class="wrapper">
        <!-- 加载数据的时候，swiper首先获取是空数组，怎么样解决呢？通过判断输入数据的长度来进行判断 -->
        <swiper :options="swiperOption" v-if="showSwiper">
            <swiper-slide v-for='item of list' :key='item.id'>
                <img class='swiper-img' :src='item.imgUrl' />
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
  </div>
</template>

<script>
export default{
    name: 'HomeSwiper',
    props: {
        list: Array
    },
    // es6写法，返回数据
    // 在子组件中定义data必须写函数
    data(){
        return {
            // 增加配置项
            swiperOption: {
                // 实现圆点
                pagination: '.swiper-pagination',
                // 实现循环
                loop: true
            }
        }
    },
    computed: {
        showSwiper(){
            return this.list.length
        }
    },
}
</script>
// 高比宽padding-bottom: 26.67% 完成自适应  height:31.25vm对于有些浏览器不适用
<style lang='stylus' scoped>
    //>>>三个右箭头表示样式穿透，这样就不受scoped样式的限制了 
    .wrapper>>>.swiper-pagination-bullet-active
        background: white;
    .wrapper
        overflow: hidden;
        width: 100%;
        height: 0;
        padding-bottom: 26.67%
        background: #eee;
        .swiper-img
            width: 100%;
</style>